import './Videos.scss';
import { videoStore } from '../../stores/VideoStore';
import { observer } from 'mobx-react';
import { useEffect } from 'react';
import { Spin } from 'antd';
import { LoadingOutlined, EyeOutlined, HeartOutlined, StarOutlined } from '@ant-design/icons';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-awesome-slider/dist/styles.css';
import Icons from '../../images/images';
import AwesomeSlider from 'react-awesome-slider';
import withAutoplay from 'react-awesome-slider/dist/autoplay';
import eventBus from '../../utils/eventBus';
import { Icon_Play } from '../../images/icons/Play';

const AutoplaySlider = withAutoplay(AwesomeSlider);

const imageList: Array<Object> = [
    {
        source: 'https://static.wixstatic.com/media/51a0dc_6470c35d22a642ea8f8f922ea1427224~mv2.jpg/v1/fill/w_1903,h_388,al_c,q_85,usm_0.66_1.00_0.01/51a0dc_6470c35d22a642ea8f8f922ea1427224~mv2.webp',
    },
    {
        source: 'https://static.wixstatic.com/media/690e5c88a9d14c62952dca57af039fdc.jpg/v1/fill/w_1903,h_388,al_c,q_85,usm_0.66_1.00_0.01/690e5c88a9d14c62952dca57af039fdc.webp',
    },
    {
        source: 'https://static.wixstatic.com/media/51a0dc_b063c9d5b637459081c3714e608a90f7~mv2.jpg/v1/fill/w_1903,h_388,al_c,q_85,usm_0.66_1.00_0.01/51a0dc_b063c9d5b637459081c3714e608a90f7~mv2.webp',
    },
]


export const Videos = observer((props: any) => {
    useEffect(() => {
        videoStore.getData();
    }, []);
    let list: any = videoStore.list;
    let left = list.length % 4;
    for (let i = 0; i < left; i++) {
        list.push(undefined);
    }
    eventBus.addListener('toBottom', () => {
        videoStore.getData(true);
    })
    return (
        <div className="videoPage">
            <AutoplaySlider
                play={true}
                media={imageList}
            />
            <div className="videoWrapper">
                <ul className="content">
                    {videoStore.loading ? <div className="loading">
                        <Spin indicator={<LoadingOutlined style={{ fontSize: 40 }} />} />
                    </div> : videoStore.list.map((item, idx) => {
                        if (!item) {
                            return <li className="item"></li>
                        }
                        return <li key={props.key} role="listitem" className="collection-item-2 w-dyn-item w-col w-col-4 videoItem" onClick={() => {
                            videoStore.selectedItem = item;
                        }}><a
                            href="javascript:;" className="link-block-4 w-inline-block">
                                <div className="div-block-39">
                                    <div style={{ backgroundImage: `url(${item.thumb})` }}
                                        className="div-block-46">
                                            <img
                                            src="https://uploads-ssl.webflow.com/5d1f262a719f5884d8fee399/5fb47b1dacc0cadae640ead0_white_weave_bottom_div.svg"
                                            loading="lazy" alt="" className="image-23" /></div>
                                    <div className="div-block-40">
                                        <p className="paragraph-8">{item.title}.</p>
                                        <div className="div-block-41">
                                            <div className="view-left">
                                                <EyeOutlined />
                                                <div className="viewCount">{item.viewcount}</div>
                                                <StarOutlined style={{ color: item.isfollow === 1 ? '#1c2437' : 'inherit' }} />
                                                <HeartOutlined style={{ color: item.islike === 1 ? '#1c2437' : 'inherit' }} />
                                            </div>
                                            <div>
                                                <div className="text-block-9">{item.createtime.slice(0, 10)}</div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div className="mask">
                                <img
                                    src={Icon_Play}
                                    loading="lazy" alt="" className="image-23" />

                            </div>
                        </li>
                        //     return <li className="item" key={idx} onClick={() => {
                        //         videoStore.selectedItem = item;
                        //     }}>

                        //         <LazyLoadImage
                        //             alt={item.title}
                        //             effect="opacity"
                        //             src={item.thumb} />
                        //         <div className="title">{item.title}</div>
                        //         <div className="bottom">
                        //             <div className="left">
                        //                 <EyeOutlined />
                        //                 <div className="viewCount">{item.viewcount}</div>
                        //                 <StarOutlined style={{ color: item.isfollow === 1 ? '#1c2437' : 'inherit' }} />
                        //                 <HeartOutlined style={{ color: item.islike === 1 ? '#1c2437' : 'inherit' }} />
                        //             </div>
                        //             <div className="date">{item.createtime.split(" ")[0]}</div>
                        //         </div>
                        //     </li>
                    })
                    }
                </ul>
                {videoStore.loadingMore && <div className="loadmore">
                    <Spin indicator={<LoadingOutlined style={{ fontSize: 30 }} />} />
                </div>}
            </div>
            {
                videoStore.selectedItem && <div className="videoContent">
                    <div className="tabs">
                        <img className="back" src={Icons.close} alt="" onClick={() => {
                            videoStore.selectedItem = undefined;
                        }} />

                        <div className="items">
                            <div className="like">
                                <img src={true ? Icons.icon_like_s : Icons.icon_like} alt="" onClick={() => {
                                    // researchDetailStore.like();
                                }} />
                                <div className="count">{22}</div>
                            </div>
                            <img className='follow' src={true ? Icons.follow_s : Icons.follow} alt="" onClick={() => {
                                // researchDetailStore.follow();
                            }} />
                        </div>
                    </div>
                    <div className="content">
                        <div className='videoPlayer'>
                            <AwesomeSlider
                                onFirstMount={(e: any) => {
                                    var video = e.currentSlide.querySelector("video");
                                    video.autoplay = true;
                                }}
                                onTransitionStart={(e: any) => {
                                    var video = e.currentSlide.querySelector("video");
                                    if (video !== null && !video.paused) {
                                        video.pause();
                                    }
                                }}
                                onTransitionEnd={(e: any) => {
                                    var video = e.currentSlide.querySelector("video");
                                    video.play();
                                }}
                                bullets={false}
                                selected={videoStore.list.map((l) => l.id).indexOf(videoStore.selectedItem.id)}
                                media={videoStore.list.map((item) => { return { source: item.url } })}
                            />
                            <div className="title">
                                {videoStore.selectedItem.title}
                            </div>
                        </div>
                        <div className="info">

                            <div className="videoList">
                                {videoStore.list.map((item, idx) => {
                                    if (!item) {
                                        return <li className="item"></li>
                                    }
                                    return <li className="item" key={idx} onClick={() => {
                                        videoStore.selectedItem = item;
                                    }}>

                                        <LazyLoadImage
                                            alt={item.title}
                                            effect="opacity"
                                            src={item.thumb} />
                                        <div className="title">{item.title}</div>
                                    </li>
                                })}
                            </div>
                        </div>

                    </div>


                </div>
            }

        </div >
    )
});